<template>
	<web-view v-if="isLoad" :src="pagePath" @message="getH5Message"> </web-view>
</template>

<script>
	export default {
		name: 'webViewPage',
		data() {
			return {
				pagePath: '',
				isLoad: false,
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar
			}
		},
		computed: {},

		onLoad(option) {
			this.isLoad = false
			if (option && option.pagePath) {
				let pagePath = option.pagePath
				console.info(`this.CustomBar:`, this.CustomBar)
				console.info(`this.StatusBar:`, this.StatusBar)
				const baseUrl = `CustomBar=${this.CustomBar}&StatusBar=${this.StatusBar}&t=${new Date().getTime()}`
				// 如果有带参数了，就接上
				if (this.hasParams(option.pagePath)) {
					pagePath += `&` + baseUrl
				} else {
					pagePath += `?` + baseUrl
				}
				const url = window.location.origin + '/#/' + +pagePath
				console.info(`url:`, url)
				this.pagePath = url
				console.info(`pagePath:`, pagePath)
				this.isLoad = true
			}
		},
		methods: {
			hasParams(url) {
				const regex = /[?&]([^=#]+)=([^&#]*)/g
				return regex.test(url)
			},
			getH5Message(enent) {
				const webViewData = enent.detail.data[0]

				// if (webViewData && webViewData.type == 'changeTabBar') {
				//     this.changeTabBar({
				//         index: parseFloat(webViewData.action),
				//     })
				// }
			}
		}
	}
</script>

<style>
	.webViewPage {
		width: 750rpx;
		height: 100vh;
		overflow: hidden;
	}
</style>
